<template>
    <div class="login">
        <div class="content">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="密码登录" name="pwdLogin">
                    <el-form :model="pwdForm" :rules="pwdRules" ref="pwdRuleForm" class="pwd_form">
                        <el-form-item label="" prop="username">
                            <el-input v-model="pwdForm.username" placeholder="用户名admin" prefix-icon="el-icon-user"/>
                        </el-form-item>
                        <el-form-item label="" prop="password">
                            <el-input v-model="pwdForm.password" placeholder="密码123456" prefix-icon="el-icon-lock"/>
                        </el-form-item>
                        <el-form-item size="large">
                            <div class="form_btn">
                                <el-button type="primary" size="medium" @click="onSubmit" :icon="loading?'el-icon-loading':''">{{loading?'登录中':'登录'}}</el-button>
                                <el-button size="medium" @click="reset">重置</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="手机号登录" name="phoneLogin">手机号登录</el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import {login} from '../../api/login'
export default {
    data() {
        return {
            activeName:'pwdLogin',
            pwdForm:{
                username:'admin',
                password:'123456'
            },
            pwdRules:{
                username:[
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ]
            },
            loading:false,
        }
    },
    methods:{
        handleClick(val){
            console.log(val);
        },
        //登录
        onSubmit(){
            //提交登录 
            this.$refs.pwdRuleForm.validate((valid) => {
                if (valid) {
                    this.loading=true;
                   //请求
                   let params={
                       username:this.pwdForm.username,
                       password:this.pwdForm.password
                   }
                    login(params).then(res=>{
                        const {code,data,msg}=res;
                        this.loading=false;
                        if(code==200){
                            localStorage.setItem('token',data.token);
                            localStorage.setItem('userInfo',JSON.stringify(data));
                            this.$router.push('/home');
                        }
                    }) 
                } else {
                    return false;
                }
            });
        },
        //重置
        reset(){
            this.pwdForm.username="";
            this.pwdForm.password="";
        }
    }
}
</script>
<style lang="less" scoped>
.login{
    width: 100%;
    height: 100vh;
    background: linear-gradient(#11998e,#38ef7d);
    display: flex;
    justify-content: center;
    align-items: center;
    .content{
        width: 450px;
        height: 350px;
        background: white;
        border-radius: 5px;
        padding: 15px 25px;
        box-sizing: border-box;
        .pwd_form{
            margin-top: 12px;
            .form_btn{
                width: 160px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
            }
        }
    }
}
</style>
<style lang="less">

</style>
